<template>
  <div>
    <h1>老虎机抽奖</h1>
    <SlotMachine
      ref="luckyRef"
      width="240px"
      height="180px"
      :blocks="blocks"
      :slots="slots"
      :prizes="prizes"
      :defaultStyle="defaultStyle"
      :defaultConfig="defaultConfig"
      @end="endCallBack"
    />
    <br />
    <button @click="begin">开始</button>
    <!-- <button @click="end">结束</button> -->
  </div>
  <!-- <lucky-wheel width="200px" height="200px" :blocks="blocks" :prizes="prizes" /> -->
</template>

<script lang="ts">
import { ref, defineComponent, toRaw, onMounted } from "vue";
export default defineComponent({
  // export default {
  name: "xxxx",
  setup(props) {
    const luckyRef = ref();
    const blocks = ref([
      { padding: "10px", background: "#869cfa" },
      { padding: "10px", background: "#e9e8fe" },
    ]);
    const slots = ref([
      { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
      { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
      { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
    ]);
    const prizes = ref([
      { fonts: [{ text: "0", top: "15%" }] },
      { fonts: [{ text: "1", top: "15%" }] },
      { fonts: [{ text: "2", top: "15%" }] },
      { fonts: [{ text: "3", top: "15%" }] },
      { fonts: [{ text: "4", top: "15%" }] },
      { fonts: [{ text: "5", top: "15%" }] },
      { fonts: [{ text: "6", top: "15%" }] },
      { fonts: [{ text: "7", top: "15%" }] },
      { fonts: [{ text: "8", top: "15%" }] },
      { fonts: [{ text: "9", top: "15%" }] },
    ]);

    const defaultStyle = ref({
      borderRadius: Infinity,
      background: "#bac5ee",
      fontSize: "32px",
      fontColor: "#333",
    });
    const defaultConfig = ref({
      rowSpacing: "20px",
      colSpacing: "10px",
    });

    const startCallback = () => {
      // 开始游戏
      luckyRef.value.play();
      // 假设接口的请求速度是5s
      setTimeout(() => {
        // 假设 4 种结果
        const res = [
          [9, 9, 6],
          [0, 0, 7],
          [6, 6, 6],
          [8, 8, 8],
        ];
        // 随机取一组数据
        const index = res[(Math.random() * 4) >> 0];
        // 然后停止游戏 (缓慢停止)
        luckyRef.value.stop(index);
      }, 5000);
    };
    const endCallBack = (prize) => {
      // 当完全停止时, 触发回调函数
      console.log(prize);
    };

    const begin = () => {
      startCallback();
      //   setInterval(() => {
      //     startCallback();
      //   }, 6000);
    };

    const end = () => {};

    return {
      blocks,
      prizes,
      slots,
      defaultStyle,
      luckyRef,
      startCallback,
      defaultConfig,
      endCallBack,
      begin,
    };
  },
});

// };
</script>
